Pokročilé typy v TypeScripte: Ovládanie typov s literálmi šablón a podmienkových typov

Medzinárodný príklad: Spracovanie rôznych formátov dátumu

Rôzne regióny sveta používajú rôzne formáty dátumu. Podmienkové typy môžete použiť na spracovanie týchto variácií.

type DateFormat = "YYYY-MM-DD" | "MM/DD/YYYY" | "DD.MM.YYYY";

type ParseDate = T extends "YYYY-MM-DD"
  ? { year: number; month: number; day: number; format: "YYYY-MM-DD" }
  : T extends "MM/DD/YYYY"
  ? { month: number; day: number; year: number; format: "MM/DD/YYYY" }
  : T extends "DD.MM.YYYY"
  ? { day: number; month: number; year: number; format: "DD.MM.YYYY" }
  : never;


function parseDate(dateString: string, format: T): ParseDate {
  // (Implementácia by spracovala rôzne formáty dátumu)
  if (format === "YYYY-MM-DD") {
    const [year, month, day] = dateString.split("-").map(Number);
    return { year, month, day, format } as ParseDate;
  } else if (format === "MM/DD/YYYY") {
    const [month, day, year] = dateString.split("/").map(Number);
    return { month, day, year, format } as ParseDate;
  } else if (format === "DD.MM.YYYY") {
    const [day, month, year] = dateString.split(".").map(Number);
    return { day, month, year, format } as ParseDate;
  } else {
    throw new Error("Invalid date format");
  }
}

const parsedDateISO = parseDate("2023-10-27", "YYYY-MM-DD"); // Type: { year: number; month: number; day: number; format: "YYYY-MM-DD"; }
const parsedDateUS = parseDate("10/27/2023", "MM/DD/YYYY"); // Type: { month: number; day: number; year: number; format: "MM/DD/YYYY"; }
const parsedDateEU = parseDate("27.10.2023", "DD.MM.YYYY"); // Type: { day: number; month: number; year: number; format: "DD.MM.YYYY"; }


console.log(parsedDateISO.year); // Prístup k roku s vedomím, že tam bude

Tento príklad používa podmienkové typy na definovanie rôznych funkcií parsovania dátumu na základe určeného formátu dátumu. Typ ParseDate zaisťuje, že vrátený objekt má správne vlastnosti na základe formátu.

Kombinovanie typov s literálmi šablón a podmienkových typov

type EventName = \`on${Capitalize}\`;

type ExtractEventPayload = T extends EventName
  ? { type: T; payload: any }  // Zjednodušené pre demonštráciu
  : never;


type ClickEvent = EventName<"click">;  // "onClick"
type MouseOverEvent = EventName<"mouseOver">;  // "onMouseOver"


//Príklad funkcie, ktorá prijíma typ
function processEvent(event: T): ExtractEventPayload {
    //V skutočnej implementácii by sme udalosť skutočne odoslali.
    console.log(\`Processing event ${event}\`);

    //V skutočnej implementácii by sa payload (dáta) zakladal na type udalosti.
    return { type: event, payload: {} } as ExtractEventPayload;
}

//Všimnite si, že návratové typy sú veľmi špecifické:
const clickEvent = processEvent("onClick");  //  { type: "onClick"; payload: any; }
const mouseOverEvent = processEvent("onMouseOver"); //  { type: "onMouseOver"; payload: any; }

//Ak použijete iné reťazce, dostanete never:
// const someOtherEvent = processEvent("someOtherEvent"); // Type is \`never\`

Osvedčené postupy a úvahy

• Zachovajte jednoduchosť: Hoci sú tieto pokročilé typy výkonné, môžu sa rýchlo stať komplexnými. Usilujte sa o jasnosť a udržiavateľnosť.
• Dôkladne testujte: Zabezpečte, aby sa vaše definície typov správali podľa očakávania, písaním komplexných unit testov.
• Dokumentujte svoj kód: Jasne dokumentujte účel a správanie vašich pokročilých typov, aby ste zlepšili čitateľnosť kódu.
• Zvážte výkon: Nadmerné používanie pokročilých typov môže ovplyvniť čas kompilácie. Profilujte svoj kód a optimalizujte ho tam, kde je to potrebné.